<template>
  <div class='app-container'>
    <div class='policynumber'>
      <div class='policynumber-tab'>
        <div class='tab-con'>
        	<span @click='toone'>按保单号登记</span>
          <span @click='toPolicynumber'>批量登记</span>
          <span @click='toExcel'>Excel表格导入</span>
          <span class='active'>保单导入历史</span>
        </div>
        <div class="app-box">
          <div class="user-top">
            <div class="user-row">
              <div class="user-col line1">
                <span class="user-lb " style='text-align:left;'>
                            时间范围
                        </span>
                <el-date-picker format='yyyy-MM-dd' value-format='yyyy-MM-dd' size='mini' v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </div>
              <div class="user-col line1">
                <span class="user-lb">
                            保险公司
                </span>
                <div class="util-select">
                  <el-select v-model="form.insurance" placeholder="请选择保险公司" class='inputbox' size='mini' @change='getinsurancestaffs'>
                    <el-option-group v-for="group in items" :key="group.letter" :label="group.letter">
                      <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName
      " :value="item.id">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </div>
              </div>
              <div class="user-col line1">
                <span class="user-lb">
                            工　号
                </span>
                <div class="util-select">
                  <el-select v-model="form.gonghao" placeholder="请选择工号" size='mini' class='inputbox'>
                    <el-option v-for="item in items1" :key="item.id" :label="item.staffAccount" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <!--  <div class="user-col searchBox" > -->
              <!-- <el-button size="mini" type='primary' class="icon iconfont icon-sousuo searchBox" @click='search()'>搜索</el-button> -->
              <!-- </div> -->
            </div>
            <div class='user-row'>
              <div class="user-col">
                <span class="user-lb " style='text-align:left;'>
                            业务归属
                        </span>
                <div class="util-select">
                  <el-select v-model="salesmanId" class='inputbox wd230' placeholder="请选择业务归属" size='mini' filterable>
                    <el-option v-for="item in users" :key="item.organzationId" :label="item.organzationName" :value="item.organzationId">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="user-col">
                <span class="user-lb">
                            类　　型
                        </span>
                <div class="util-select">
                  <el-select v-model="form.id1" class='inputbox' size='mini'>
                    <el-option v-for="item in entry" :key="item.id" :label="item.content
                                " :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="user-col">
                <span class="user-lb">
                            状　态
                        </span>
                <div class="util-select">
                  <el-select v-model="form.id3" class='inputbox' size='mini'>
                    <el-option v-for="item in state" :key="item.id2" :label="item.content
                                " :value="item.id2">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <el-button size="mini" type='primary' class="icon iconfont icon-sousuo" @click='search()'>搜索</el-button>
            </div>
          </div>
          <!--            <div class="user-table
"> -->
          <el-table :data="tableData" v-loading="listLoading" element-loaditext="Loading" stripe>
            <el-table-column prop="guaranteeSlipNumber" label="保单号">
            </el-table-column>
            <el-table-column prop="insuranceName" label="保险公司" width="110">
            </el-table-column>
            <el-table-column prop="staffAccount" label="工号" width="220">
              <template slot-scope="scope">
                <span>{{scope.row.staffAccount}}（{{scope.row.describe}}）</span>
              </template>
            </el-table-column>
            <el-table-column  label="业务归属" >

                     
                      <template slot-scope="scope">
                         
                          <!-- <span class="toBlock">（{{scope.row.userName}}）</span> -->
										    	<el-tooltip class="item" effect="light" placement="top">
                            <div slot="content" class='compony_text'>
                              <span>{{scope.row.organizationFullName}}</span>
                            </div>
                            
                              <span class="companytest"><span class="toBlock">{{scope.row.organizationUnitName}}</span></span>
                          </el-tooltip>
                      </template>
						
              <!-- <template slot-scope="scope">
                <span>{{scope.row.organizationUnitName}}</span>
                <span >({{scope.row.userName}})</span>
              </template> -->
            </el-table-column>
            <el-table-column label="导入类型" width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.importType==0">客户端录单</span>
                <span v-if="scope.row.importType==1">手动录单</span>
                <span v-if="scope.row.importType==2">批量录单</span>
                <span v-if="scope.row.importType==3">同步录单</span>
              </template>
            </el-table-column>
            <el-table-column prop="importDate" label="导入时间" width="160">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.state==2"> <i class="icon iconfont icon-icon01 flag" style="color:#389E0D;"></i>成功</span>
                <span v-if="scope.row.state==6"> <i class="icon iconfont icon-icon01 flag" style="color:#ee6000;"></i>工号不可用</span>
               <span v-if="scope.row.state==7"> <i class="icon iconfont icon-icon01 flag" style="color:#ee6000;"></i>重试中</span>
               
                <span v-if="scope.row.state==3"> <i class="icon iconfont icon-icon01 flag"  style="color:#CF1322"></i>
                <el-tooltip placement="bottom" effect="light" v-if="scope.row.errorCode!== null">
                         <div slot="content" v-if="scope.row.errorCode==200">保单已存在</div>
                         <div slot="content" v-if="scope.row.errorCode==205||scope.row.errorCode==207">其他错误</div>
                         <div slot="content" v-if="scope.row.errorCode==208||scope.row.errorCode==203">工号疑似不可用</div>
                         <div slot="content" v-if="scope.row.errorCode==201||scope.row.errorCode==204">查询失败</div>
                         <div slot="content" v-if="scope.row.errorCode==300||scope.row.errorCode==202">服务端异常</div>
                         <div slot="content" v-if="scope.row.errorCode==209">无业务归属</div>
                         
                        <span>失败</span>
                </el-tooltip>
                 <span v-else>失败</span>
                </span>
                
                <span v-if='scope.row.state!=2&&scope.row.state!=3&&scope.row.state!=6&&scope.row.state!=7'><i class="icon iconfont icon-icon01 flag" style="color:#027dca"></i>处理中</span>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="操作" width="100" align='right'>
              <template slot-scope="scope">
                <a v-if="scope.row.state==3" class='links' @click='relead(scope.row.id)'>重新导入</a>
              </template>
            </el-table-column>
          </el-table>
          <div class="user-page">
            <el-pagination @current-change="handleCurrentChange" background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" :current-page.sync="currentPage">
            </el-pagination>
          </div>
          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  data() {
    return {
      form: {
        insurance: '',
        gonghao: '',
        id1: -1,
        id3: -1,
        salesmanId: '',


      },
      salesmanId: '',
      value: [],
      items: [],
      insurance: '',
      items1: [],
      tableData: [],
      listLoading: false,
      pagetotal: null,
      users: [],
      currentPage: 1,
      page: 1,
      entry: [{
          id: -1,
          content: '全部'
        },
        {
          id: 0,
          content: "客户端录单"
        },
        {
          id: 1,
          content: '手动录单'
        },
        {
          id: 2,
          content: '批量录单'
        },
        {
          id: 3,
          content: '同步录单'
        },

      ],

      st: '',

      et: '',
      state: [{
          id2: -1,
          content: '全部'
        },
        {
          id2: 1,
          content: '处理中'
        },
        {
          id2: 2,
          content: '成功'
        },
        {
          id2: 3,
          content: '失败'
        },
          {
          id2: 6,
          content: '工号不可用'
        },
          {
          id2: 7,
          content: '重试中'
        },

      ],
    }
  },
  created() {
    // this.getinsurancestaffs();
    this.getusers();
    this.groupList()
     console.log(this.$route.query.importType)
    if (this.$route.query.page) {
      this.page = Number(this.$route.query.page);
    }
    if (this.$route.query.st) {
      this.st = this.$route.query.st;
      this.value = [this.st]
    }
    if (this.$route.query.et) {
      this.et = this.$route.query.et;
      this.value = [this.st, this.et];
    }
    if (this.$route.query.insurancesid) {
      this.form.insurance = this.$route.query.insurancesid;
      this.getinsurancestaffs()
    }
    if (this.$route.query.staffsid) {
      this.form.gonghao = this.$route.query.staffsid;
    }
    if (this.$route.query.importType) {
      this.form.id1 = Number(this.$route.query.importType);
    }
    if (this.$route.query.userId) {
      this.salesmanId = Number(this.$route.query.userId);
    }
    if (this.$route.query.dealState) {
      this.form.id3 = Number(this.$route.query.dealState);
    }
    if (this.$route.query.ruleForm) {
      var that = this
      console.log(this.$route.query.ruleForm)
      let objs = JSON.parse(this.$route.query.ruleForm)
      console.log(objs)
      this.page = 1
      Vue.set(this.form, 'insurance', objs.insurance)
      setTimeout(function() {
        console.log(1111111111111111)
        Vue.set(that.form, 'gonghao', objs.gonghao)

        that.salesmanId = objs.yewuyuan
        that.fillDate();
      }, 500)

    } else {
      this.fillDate();
    }


  },
  watch: {
    $route(to, from) {
      this.page = this.$route.query.page;


      if (this.$route.query.st && this.$route.query.et) {
        this.st = this.$route.query.st;
        this.et = this.$route.query.et;
        this.value = [this.st, this.et];
      }
      this.form.insurance = this.$route.query.insurancesid;
      if(this.$route.query.insurancesid){

        this.getinsurancestaffs()
      }
      // this.getinsurancestaffs(this.$route.query.insurancesid)
      this.form.gonghao = this.$route.query.staffsid;
      // if(this.$route.query.importType){
      //    this.form.id1 = Number(this.$route.query.importType)
      // }
      this.form.id1= this.$route.query.importType;
      console.log(this.$route.query.importType)
     console.log(this.form.id1)
      this.salesmanId = this.$route.query.userId;
      this.form.id3 = this.$route.query.dealState;
      this.fillDate();
    }
  },
  methods: {
    letChange(val) {
      console.log(val)
    },
    	toone(){
  		this.$router.push({
        name: "policyNumber"
      });
  	},
    toPolicynumber() {
      this.$router.push({
        name: 'insentry1',
      })
    },
    toExcel() {
      this.$router.push({
        name: 'policyexcel',
      })
    },
    getinsurancestaffs() {
      //this.gonghao = ""
      Vue.set(this.form, "gonghao", "")

      let all = { id: "", staffAccount: "全部工号", describe: "" };

      let params = {
        id: this.form.insurance,
      };
        if (this.form.insurance == "" || this.form.insurance == null) {
          this.items1 = []
          this.items1.push(all)
        }else{
            this.post(
        params,
        "services/app/common/GetCurrentInsuranceStaffs"
      ).then(rs => {
        console.log(rs);
        let result = rs.result.items;
        result.unshift(all);
        this.items1 = result;
        // console.log(this.items1)
        // console.log(2222111111111111111111111111111111111111111111111)
        for (let i = 0; i < this.items1.length; i++) {
          //staffAccount
          if (this.items1[i].describe != "") {
            this.items1[i].staffAccount = this.items1[i].staffAccount + " (" + this.items1[i].describe + ")"
          } else {
            this.items1[i].staffAccount = this.items1[i].staffAccount
          }

        }

        console.log(this.items1)
        console.log(3333)
      });
        }
    

    },
    groupList() {
      let all = { letter: "", insurances: [{ insuranceName: '全部保险公司', id: '' }] };
      let params = {
        // id:val,
      }
      this.post(params, 'services/app/common/GetGroupInsurances').then(re => {
        if (re.success) {
          this.items = re.result.items
          let result = re.result.items
          result.unshift(all);
          console.log("success")
          this.options1 = result;
        }
      });
    },
    getusers(){
        // let all = { organzationId: '', organzationName: "请选择业务归属" }
        this.post({}, "services/app/common/CurrentBusinessAscription").then(rs => {
          
          if (rs.success) {
            let result = rs.result.items;
            this.users = result;
          //  result.unshift(all);
    
            console.log(this.users)
            // this.salesmanId=rs.result.items[0].organzationId
          }
        });
    },
    // getusers() {
    //   let all = { id: '', userName: "全部业务员" }
    //   let params = {};
    //   this.post(params, "services/app/common/GetCurrentUsers").then(rs => {
    //     console.log(rs);
    //     let result = rs.result.users;
    //     result.unshift(all);
    //     this.users = result;
    //   });
    // },
    fillDate() {
      console.log(123123)
      console.log(this.form)
      this.listLoading = true;
      if (this.value != null) {
        this.st = this.value[0];
        this.et = this.value[1];
      } else {
        this.st = '';
        this.et = '';
      }

      let params = {
        id: this.$route.params.id,
        pageIndex: this.page,
        starttime: this.st,
        endtime: this.et,
        insurancesid: this.form.insurance,
        staffsid: this.form.gonghao,
        importType: this.form.id1,
        BusinessOrganzationId: this.salesmanId,
        dealState: this.form.id3,
      }
      this.post(params, 'services/app/guaranteeSlip/QueryGuaranteeSlipBatchDetails').then(rs => {
        this.listLoading = false;
        this.tableData = rs.result.items
        this.pagetotal = rs.result.totalCount;
        this.currentPage = this.page;
        // if(this.$route.query.importType){
        //  this.form.id1 = Number(this.$route.query.importType)
      // }

      })
    },
    handleCurrentChange(val) {
      let date = this.value;

      let starttime, endtime;
      if (date && date.length !== 0) {
        starttime = date[0];
        endtime = date[1];
      }
      this.$router.push({
        name: 'policyhistory',
        query: {
          page: val,
          st: starttime,
          et: endtime,
          insurancesid: this.form.insurance,
          staffsid: this.form.gonghao,
          importType: this.form.id1+'',
          userId: this.salesmanId,
          dealState: this.form.id3,
          // time: new Date().getTime(),
        }
      })
    },
    search() {
      let date = this.value;
      let starttime, endtime;
      if (date && date.length !== 0) {
        starttime = date[0];
        endtime = date[1];
      }
      this.$router.push({
        name: 'policyhistory',
        query: {
          page: 1,
          st: starttime,
          et: endtime,
          insurancesid: this.form.insurance,
          staffsid: this.form.gonghao,
          importType: this.form.id1+'',
          userId: this.salesmanId,
          dealState: this.form.id3,
          time: new Date().getTime(),
        }
      })
    },
    relead(val) {
      const me = this;
      this.$confirm('确定重新导入?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          let params = {
            id: val
          };
          this.post(
            params,
            "services/app/guaranteeSlip/UpdateBatchDetailState"
          ).then(rs => {
            if (rs.success) {
              this.$notify({
                title: '成功',
                message: '导入成功',
                type: 'success'
              });
              this.fillDate()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导入'
          });
        });
    }

  }
}

</script>
<style lang='scss' scoped>
.policynumber {
  .policynumber-tab {
    .flag {
      vertical-align: middle;
    }
    width: 100%;
    .tab-con {
      border-bottom: 1px solid #cbcbcb;
      span {
        width: 150px;
        line-height: 60px;
        height: 60px;
        display: inline-block;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        margin-bottom: -1px;
      }
      span:first-child {
        margin-left: 20px;
      }
      .active {
        color: #ee6000;
        background: url(../../assets/images/bomactive2x.png) center 51px no-repeat;
      }
    }
  }
  .app-box {
    border-radius: 3px; // border: 1px solid #ddd;
    // background: #fff;
    min-height: 575px;
    position: relative;
    .user-top {
      .user-row {
        margin-bottom: 22px;
        height: 28px;
        .line1 {
          margin-bottom: 22px !important;
        }
        .user-col {
          float: left;
          position: relative;
          padding-left: 85px;
          margin-right: 20px;
          margin-bottom: 30px;
          .user-lb {
            position: absolute;
            left: 0;
            top: 0;
            text-align: right;
            width: 65px;
            line-height: 28px;
            color: #606266;
          }
          .user-lb1 {
            text-align: left;
          }
        }
        .user-search {
          float: left;
          margin-left: 15px;
        }
        .user-add {
          float: right;
        }
      }
      .user-row:last-child {
        margin-bottom: 30px;
      }
    }
    .user-page {
      width: 100%;
      text-align: right;
      margin-top: 30px;
    }
    .oper-a {
      color: #027dca;
    }
  }
  .user-down {
    margin-right: 10px;
  }
}

</style>
